Script Examples
Nothing shows the idea of a script better than a few samples. "A picture speaks a thousand words!".
We modified the following example from MMExtension by creating 2 buttons, one is the handle, and the second button is the sphere in the middle.
Because our goal was to show this image on a web page, we set the Highlighted frame to be different, and left the Pushed frame the same as it was - Normal. A bit different from the other example for Multimedia Builder.
Note: You have all these scripts already typed, and listed in the Script List.
A Simple Generic Text file listing images and sizes
Now this is actually a normal txt file so it is a kind of dummy file, but it lists most of the script tags and sizes, so you can use it as a reference.
A simple generic text info Shows images, sizes and the position <#EXTENSION>txt <#SCRIPTSTART> Project dimensions: <#BGWIDTH> x <#BGHEIGHT> Background Image: <#LOOP> Label: <#LABEL> ************************************************ |
First it lists the project dimensions, which is the same as size as the background image and then lists the name of the background image.
Now notice the part between <#LOOP> and <#END>:
First, it shows the number of the object, and the object's name.
Then the next line shows the Label, and a list of the button's 3 frames,
which are the filenames.
And lastly it lists the position, and the size of the particular button.
This is in between the LOOP/END tags and would be repeated for any other buttons you have.
We have 2
When you press the Test button the following will appear in the notepad:
A list of all files with the preview on html document
We now want to display the files one after another (the files belonging to one object in a row) in a web page used as a simple reference. We will use HTML language with tables, but for this you'll need a basic knowledge of html.
A simple script lists all objects on the web page in a table. <#EXTENSION>htm <#SCRIPTSTART> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <meta name="generator" content="Real-DRAW"> <title>Image List</title> </head> <body bgcolor="#ffffff"> <table border="1" cellpadding="0" cellspacing="2"> <tr> <td bgcolor="#ffe782">Background (<#BGWIDTH> x <#BGHEIGHT>)</td> </tr> <tr> <td valign="top" align="center"><img src="<#BGFILE>" border="0"></td> </tr> <tr> <td valign="top" align="center"><a href="<#BGFILE>"><#BGFILE></a></td> </tr> </table> <p></p> <#LOOP> </body> |
This may look complicated, but that's because of the HTML tags.
Basically it uses the same idea as in the previous example.
![]() |
Press the test button, and you should see something like
the image on the left.
Simple! But it already shows some images! |
Web Page Rollover with JAVA Script
Now it gets a bit more complicated by using a Java Script. What we have below is a normal way of creating rollovers in Java Script.
But
what is more interesting is that we actually used the LOOP/END pair twice (in blue). One is when we list the images for the Java variables and the second time is when we actually put the images
in place.
Note: This example simply ignores the background.
Simple Rollover script <#EXTENSION>htm <#SCRIPTSTART> <SCRIPT LANGUAGE="JavaScript"> |
What is the result of this?
|
The script generated a page that shows both (2) buttons and when we move cursor above them they change the frame. For this reason we also adjusted the Highlighted frame. With such a script, the highlighted frame is the one that gets most usage.. Note that we didn't add a URL, in the HREF html tag. That means that by clicking on the buttons we'd go nowhere. You can simply put the name here of another page, or a full URL. |
The complete interactive page using CSS
By modifying the script above and using Cascade Style Sheet (CSS) we will be able to display the whole document.
This is a script using CSS which exports the whole design You can set a URL link for each button by adding it to the label in a layer list. <#EXTENSION>html <#SCRIPTSTART> <html> <head> <meta name="generator" content="Real-DRAW"> <title>CSS Export</title> <style media="screen" type="text/css"><!-- #layer0 { position: absolute; top: 0px; left: 0px; width: <#BGWIDTH>px; height: <#BGFILE>px; visibility: visible } <#LOOP> </head> <body> <#LOOP> </span> |
Note: We used LOOP/END three times here, once for creating the styles, then for listing the files, and the last time for adding the styles to web layers.
![]() |
Now, this is cool, we actually made a fully interactive web page with Real-DRAW.
Any professional web page designer would be very proud! Note: The <#LABEL> command that we use as a html link on the button. You can enter a link, for example http://www.real-draw.com in the label field of the package, by double-clicking on it in the Layer Bar, which will allow us to go to that web page just by clicking on the handle. |
This of course is not the end of it. You can use Script Generator for many other things.
What about a script that will create a skin for some mp3 player?